import { computed, defineComponent, ref } from 'vue';
import hljs from 'highlight.js';
import hljsThemeStyles from '@/main/css/hljsTheme.module.scss';
import { HljsLanguageEnumType, HljsThemeEnumType } from '@/main/js/terminalTypes';
import { terminalViewerProps } from '@/main/js/terminalAttribute';
import CommonSelectorComponent from '@/main/components/commonSelector';

export default defineComponent({
  props: terminalViewerProps(),
  setup(props) {
    const hljsThemeStyle = ref(HljsThemeEnumType.vs2015);
    const hljsLanguage = ref(HljsLanguageEnumType.typescript);
    /** 语言选项 */
    const HljsLanguageSelectOptions = Object.keys(HljsLanguageEnumType).map(keyItem => ({
      key: keyItem,
      value: keyItem
    }));
    /** 主题选项 */
    const HljsThemeSelectOptions = Object.keys(HljsThemeEnumType).map(keyItem => ({
      key: keyItem,
      value: keyItem
    }));
    (hljs as any).configure({ useBR: true, ignoreUnescapedHTML: true });
    const methods = {
      /** 主题类型改变 */
      highlightChangeTheme(e: any) {
        const themeType = e?.target?.value ? e.target.value : hljsThemeStyle.value;
        hljsThemeStyle.value = themeType;
      },
      /** 语言类型改变 */
      highlightChangeLanguage(e: any) {
        const languageType = e?.target?.value ? e.target.value : hljsLanguage.value;
        hljsLanguage.value = languageType;
      },
      /** 获取高亮代码HTML */
      getHighlightHtml() {
        return hljs.highlight(props.data.content, {
          language: hljsLanguage.value
        }).value;
      }
    };
    const cp_highlightHtml = computed(() => {
      return hljs.highlight(props.data.content, {
        language: hljsLanguage.value
      }).value;
    });
    return () => (
      <div class={hljsThemeStyles[hljsThemeStyle.value]}>
        <div style={{ display: 'flex' }}>
          <CommonSelectorComponent
            label='语言设置'
            selectOptions={HljsLanguageSelectOptions}
            selectVal={hljsLanguage.value}
            on-change={methods.highlightChangeLanguage}
          />
          <CommonSelectorComponent
            label='主题设置'
            selectOptions={HljsThemeSelectOptions}
            selectVal={hljsThemeStyle.value}
            on-change={methods.highlightChangeTheme}
          />
        </div>
        <pre class='hljs'>
          <code domPropsInnerHTML={cp_highlightHtml.value} />
        </pre>
      </div>
    );
  }
});
